<template>
	<pop-layout :show.sync="show" :layoutstyle="layoutStyle" :showContent="hasMapItem == true">
		<template #header>
			<image-com :src="baseURL + mapItem.mainImageUrl" :imgStyle="{width: '2.75rem',height: '2.75rem'}"></image-com>
		</template>
		<template #title>
			<div class="font28 bold line15">{{ mapItem.productName }}<template v-if="popType != 2"> (￥{{ mapItem.salePrice }}) </template></div>
		</template>
		<template #detail>
			<div class="font24 bold line15">{{ getItemFormat(mapItem) }}</div>
		</template>
		<template #content>
			<div class="classifyList">
				<!-- <div class="padTB24 font28">制作方式</div>
				<div class="entryBox color33">
					<div class="entryItem on">
						<div class="font28 line2">炒芥兰</div>
						<div class="font28 line2">+ ¥66</div>
					</div>
					<div class="entryItem">
						<div class="font28 line2">炒芥兰</div>
						<div class="font28 line2">+ ¥66</div>
					</div>
					<div class="entryItem">
						<div class="font28 line2">炒芥兰</div>
						<div class="font28 line2">+ ¥66</div>
					</div>
					<div class="entryItem">
						<div class="font28 line2">炒芥兰</div>
						<div class="font28 line2">+ ¥66</div>
					</div>
				</div> -->
				<div v-for="(zitem, zidx) in mapItem.foodGroups"
            :key="zidx">
					<div class="padTB24 font28">{{ zitem.title }}(需选数量:{{ zitem.count }})</div>
					<div class="entryBox color33">
						<div class="entryItem " v-for="(sitem, sidx) in zitem.items"
					:key="sidx"
					@click="setSelected(sitem, zitem.items, zitem.count)" 
					:class="{ on: sitem.isDefault == true}">
							<div v-show="sitem.saleOut == true" class="clearIcon">售罄</div>
							<div class="font28 line2">{{ sitem.itemTitle }}</div>
							<div class="font28 line2">+ ¥{{ sitem.extraPrice }}</div>
						</div>
					</div>
				</div>
				<div class="padTB24 font28">备注</div>
				<div class="entryBox padB40 color33">
					<textarea v-model="mapItem.comment" placeholder="" class="entrytext font28" />
				</div>
			</div>
		</template>
		<template #footer>
			<div class="proMethodsBottomBox">
				<div class="btn font30 bold" style="flex: 2;" v-if="popType == 2">加价合计 <span class="marL40 font46">¥ {{ totalPrice }}</span></div>
				<div class="btn font30 bold" style="flex: 2;" v-else>合计 <span class="marL40 font46">¥ {{ totalPrice }}</span></div>
				<div class="btn font30 surnBtn" @click="finish" v-if="canFinish == true">加入购物车</div>
				<div class="btn font30 cancelBtn" @click="close" v-else>取消</div>
			</div>
		</template>
	</pop-layout>
</template>

<script>
import { baseURL } from "@/api/config";
import imageCom from "@/components/common/imageCom.vue";
import popLayout from "@/components/common/popLayout.vue"
import { GetProductById } from "@/api/order";
import _cloneDeep from "lodash/cloneDeep"
export default {
	components:{
		popLayout,
		imageCom,
	},
	data(){
		return{
			layoutStyle: 'proMethodsBox',
			baseURL,
			show: false,
			popType: 1, //1=菜品类型 2=套餐内菜品 3=购物车修改
			allParams: {},
			mapItem: {},
			// 青菜炒猪肉，测试
			configSellOut: [], //售罄列表
		}
	},
	computed: {
		hasMapItem() {
			let res = Object.keys(this.mapItem).length > 0 ? true : false;
			return res;
		},
		totalPrice() {
			let price = 0;
			let salePrice = this.mapItem.salePrice ?? 0;
			if (this.hasMapItem == false) return price;
			/**@type {any[]} */
			let arr = this.mapItem.foodGroups;
			for (let groups of arr) {
				for (let selected of groups.items) {
				if (selected.isDefault == true) {
					price += selected.extraPrice;
				}
				}
			}
			// 套餐内菜品价格只显示加价
			let notSumPrice = this.popType == 2 ? true : false;
			let finalPrice = notSumPrice ? price : salePrice + price;
			return finalPrice;
		},
		canFinish() {
			let res = true;
			if (!this.mapItem.foodGroups) {
				return false;
			}
			res = this.canFinishFn(this.mapItem);
			return res;
		},
	},
	methods: {
		// ----------------------------modal-------------------------
		// cloneDeep(obj) {
		// 	let copyObj = JSON.parse(JSON.stringify(obj))
		// 	return copyObj;
		// },
		close() {
		this.show = false;
		},
		showPopup(params) {
			this.allParams = params;
			this.popType = params.popType;
			// 克隆售罄列表
			if (params.item.configSellOut) {
				this.configSellOut = _cloneDeep(params.item.configSellOut);
			} else {
				this.configSellOut = [];
			}
			//this.configSellOut = this.cloneDeep(params.item.configSellOut);
			if (this.popType == 1) {
				this.reqGetProductById();
			} else {
				this.mapItem = _cloneDeep(params.item);
			}
			this.show = true;
		},
		// ----------------------------template显示---------------------
		/**
		 * @description 规格
		 * 1.skuName 2.model 3.configs.title
		 */
		getItemFormat(item) {
		// 菜品
		let str = "";
		let descArr = [];
		item.foodGroups.forEach((f) => {
			f.items.forEach((fitem) => {
			fitem.isDefault == true && descArr.push(fitem.itemTitle);
			});
		});
		str = descArr.length > 0 ? descArr.join(",") : "";
		return str;
		},
		/**
		 * @description 选中/取消选中
		 */
		setSelected(cur, group, limit) {
		// item.isDefault数量==分组可选数
		let future = !cur.isDefault;
		let hasSelected = 0;
		if (limit != 1) {
			group.forEach((g) => {
			g.isDefault == true && hasSelected++;
			});
			if (future == true && hasSelected + 1 > limit) {
			return;
			} else {
			cur.isDefault = future;
			}
		} else if (limit == 1) {
			// 单选情况
			group.forEach((g) => {
			g.isDefault = false;
			});
			cur.isDefault = future;
		}
		this.setClearOutStatus(cur);
		},
		// ----------------------------售罄相关---------------------
		/**
		 * @description 检验所有选中的sku，若售罄则不选中，首次加载调用
		 */
		setAllClearOutStaus() {
		this.mapItem.foodGroups.forEach((fg) => {
			fg.items.forEach((fi) => {
			fi.isDefault == true && this.setClearOutStatus(fi);
			});
		});
		},
		/**
		 * @param {item} 单个配置sku
		 * @description 根据configSellOut,设置单个配置售罄状态
		 */
		setClearOutStatus(item) {
		let { itemId, isDefault } = item;
		let configSellOutSpiltArr = this.configSellOut.map((i) => i.split(","));
		if (configSellOutSpiltArr.length == 0) return;
		// 根据configSellOut售罄列表，获取与当前选项有关的其他配置
		let getRelativeItems = (targetItemId) => {
			let arr = [];
			configSellOutSpiltArr.forEach((clist) => {
			if (clist.includes(targetItemId)) {
				let aitem = clist.filter((c) => c != targetItemId);
				arr.push(...aitem);
			}
			});
			return arr;
		};
		// 设置相关配置售罄状态及选中状态，若售罄则不让选中
		let setRelativeItemsSaleOut = (arr) => {
			this.mapItem.foodGroups.forEach((fg) => {
			fg.items.forEach((fi) => {
				if (arr.includes(fi.itemId) && isDefault == true) {
				fi.saleOut = true;
				fi.isDefault = false;
				} else {
				fi.saleOut = false;
				}
			});
			});
		};
		let relativeItem = getRelativeItems(itemId);
		setRelativeItemsSaleOut(relativeItem);
		},
		// ----------------------------验证-------------------------
		/**
		 * @description 验证菜品
		 */
		canFinishFn(list) {
			let res = true;
			list.foodGroups.forEach((f) => {
				let limit = f.count;
				let selected = 0;
				f.items.forEach((fitem) => {
					fitem.isDefault == true && selected++;
				});
				selected != limit && (res = false);
			});
			return res;
		},
		finish() {
			let params = {
				...this.allParams,
				mapItem: this.mapItem,
			};
			this.allParams.cb(params);
			this.close();
		},
		// ----------------------------请求-------------------------
		async reqGetProductById() {
			let { productId } = this.allParams.item;
			let { returnData = false } = await GetProductById({ productId });
			if (returnData == false) return;
			this.mapItem = returnData;
			this.setAllClearOutStaus();
		},
	},
}
</script>

<style lang="scss">
	// 制作方式
	.proMethodsBox{ z-index: 24; top: 20%; left:0; width: 100%; bottom: 0; border-radius: 0.5rem 0.5rem 0 0; text-align: left; padding: 0.75rem; transform: translate(0,0);box-sizing: border-box;
		.photo{ border-radius: 0.3rem; }
		.classifyList{ height: calc(100% - 5.25rem); overflow-y: scroll; flex: 1; -webkit-flex: 1; box-sizing: border-box; }
		.entryBox { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
			.entryItem { position: relative; display: flex; flex-direction: column; justify-content: center; width: 5.25rem; height: 3.75rem; text-align: center; margin: 0 0.75rem 0.75rem 0; border-radius: 0.25rem; background-color: #f0f0f0; box-sizing: border-box; 
				&:nth-of-type(3n) {
					margin-right: 0;
				}
				&.on{ position: relative; border: 0.1rem solid $mainColor; background-color: $mainColor; color: #333;
					//&::after { content: ''; position: absolute; right: 0; top: 0.5rem; display: block; transform: translateY(-50%); width: 40rpx; height: 40rpx; background: url(../../static/images/check_circle.png) no-repeat; background-size: cover; }
				}
				&.disable{ border: 0.1rem dashed #ccc;}
				.clearIcon{
					position: absolute;
					top: 0px;
					right: 0px;
					font-size: 0.5rem;
					color: #fff;
					padding: 0.2rem;
					border-bottom-left-radius: 0.4rem;
					background-color: #b1b1b1;
					
				}
			}
			.entrytext{ border: none; padding: 0.5rem; border-radius: 0.25rem; width: 100%; height: 3.75rem; background-color: #f0f0f0;}
		}
		.addSubtWrapper{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;
			.total{ width: 4rem;}
			.addSubt{ width: 4rem; height: calc(1rem + 2px); display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; font-size: 0.8rem; overflow: hidden; white-space: nowrap;}
			.operate{ width: 1rem; height: 1rem; line-height: 1rem;  text-align: center; cursor: pointer; color: #feb229; border: 1px solid #feb229; border-radius: 4px;
				&:last-child{ border: 1px solid #feb229; background-image: linear-gradient(to right,#ffae44,#ff6e40); color: #fff;}
			}
			.much{ width: calc(100% - 2rem - 2px);  height: 1rem; line-height: 1rem;  text-align: center; outline: none; border: none; border-radius: 0;}
		}
		.proMethodsBottomBox{ position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; height: 2.75rem; line-height: 2.75rem; overflow: hidden; box-shadow: 0 0 0.25rem rgba(0,0,0,0.2);
			.btn{ height: 2rem; line-height: 2rem; border-radius: 0.5rem; margin: 0 0.75rem;}
			.cancelBtn{ flex: 1; text-align: center; color: #333; margin-right: 0.375rem; border: 1px solid #333;}
			.surnBtn{ flex: 1; text-align: center; color: #fff; margin-left: 0.375rem; background-image: linear-gradient(to right,#ffae44,#ff6e40);}
		}
	}
</style>
